<template>
  <div name="historyDetails">
    <div class="box-card">
      <el-card>
        <div slot="header" class="clearfix">
          <span>督导员听课评价表(已提交)</span>
        </div>
        <el-form :model="form" label-width="180px" disabled>
          <el-form-item label="课题类型">
            <el-input
              :disabled="true"
              :value="classType"
              style="width: 200px"
            ></el-input>
          </el-form-item>
          <el-divider></el-divider>
          <el-form-item label="督导员">
            <el-input
              :disabled="true"
              v-model="form.supervisor"
              style="width: 200px"
            ></el-input>
          </el-form-item>
          <el-form-item label="听课学期">
            <el-input
              :disabled="true"
              v-model="form.semester"
              style="width: 320px"
            ></el-input>
          </el-form-item>
          <el-form-item label="听课时间">
            <el-input
              :disabled="true"
              v-model="form.listenDate"
              style="width: 200px"
            ></el-input>
          </el-form-item>
          <el-form-item label="听课节数">
            <el-input
              :disabled="true"
              :value="`第${form.listenTimeArray.join('、')}节`"
              style="width: 320px"
            ></el-input>
          </el-form-item>
          <el-form-item label="听课地点">
            <el-input
              :disabled="true"
              :value="form.listenAdd"
              style="width: 320px"
            ></el-input>
          </el-form-item>
          <el-divider></el-divider>
          <el-form-item label="授课教师姓名">
            <el-input
              :disabled="true"
              :value="form.tName"
              style="width: 200px"
            ></el-input>
          </el-form-item>
          <el-form-item label="所在学院">
            <el-input
              :disabled="true"
              v-model="form.tNameInSchool"
              style="width: 320px"
            ></el-input>
          </el-form-item>
          <el-form-item label="课程名称">
            <el-input
              :disabled="true"
              :value="form.courseName"
              style="width: 400px"
            ></el-input>
          </el-form-item>
          <el-form-item label="课程类别">
            <el-input
              :disabled="true"
              v-model="form.courseType"
              style="width: 200px"
            ></el-input>
          </el-form-item>
          <el-form-item label="授课班级">
            <el-input
              :disabled="true"
              v-model="form.className"
              style="width: 400px"
            ></el-input>
          </el-form-item>
          <el-form-item label="学生所在学院">
            <el-input
              :disabled="true"
              v-model="form.stuInSchool"
              style="width: 320px"
            ></el-input>
          </el-form-item>
          <el-form-item label="应到人数">
            <el-input
              :disabled="true"
              v-model="form.allNum"
              style="width: 140px"
            ></el-input>
          </el-form-item>
          <el-form-item label="实到人数">
            <el-input
              :disabled="true"
              :value="form.factNum"
              style="width: 140px"
            ></el-input>
          </el-form-item>
          <el-form-item label="出勤率">
            <el-input
              :disabled="true"
              :value="form.attendance"
              style="width: 160px"
            ></el-input>
          </el-form-item>
        </el-form>
        <div
          class="mt-2"
          v-for="(groupItem, groupKey, groupIndex) in staticInfo"
          :key="groupKey"
        >
          <!-- 判断时为了不报错 -->
          <div
            v-if="groupItem[0]"
            :v-text="groupItem[0].groupName"
            title-class="cell-title-class"
          />

          <el-collapse
            v-model="groupActiveNames[groupIndex]"
            :v-text="groupItem[0].groupName"
          >
            <el-collapse-item
              :title-class="
                item.selected ? 'item-class-selected' : 'item-class'
              "
              v-for="item in groupItem"
              :label="item.selected"
              label-class="selected-lable-class"
              :key="item.id"
              :title="
                +groupItem[0].groupSort === 1
                  ? item.targetSort + '、' + item.targetName
                  : item.targetName
              "
              :name="item.targetSort"
              :value="item.targetSort"
            >
              <!-- 这里直接传入对象是为了修改值 -->
              <el-radio-group :value="item.selected">
                <el-radio
                  :label="selectItem"
                  v-for="(selectItem, selectIndex) in item.contentArray"
                  :name="item.targetName"
                  :key="selectIndex"
                  @change="noUse()"
                  >{{ selectItem }}</el-radio
                >
              </el-radio-group>
            </el-collapse-item>
          </el-collapse>
        </div>
        <el-card class="box-card" style="margin-bottom: 1em">
          <div slot="header" class="clearfix">
            <span>总体评价</span>
          </div>
          <el-radio-group :value="form.evaluation">
            <el-radio
              :name="item"
              :label="item"
              v-for="(item, index) in selectedOptions"
              :key="index"
              @change="handleEvaluationSelected(item)"
              >{{ item }}</el-radio
            >
          </el-radio-group>
        </el-card>
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>评价意见和建议</span>
          </div>
          <el-input
            class="textArea"
            :disabled="true"
            type="textarea"
            :value="form.evaluationDetail"
            placeholder="请输入评价信息"
            :autosize="{ minRows: 8, maxRows: 20 }"
          ></el-input>
        </el-card>
        <el-card class="centerOk">
          <div>
            <div v-html="notions"></div>
          </div>
        </el-card>
      </el-card>
    </div>
  </div>
</template>

<script>
import { getDetails } from "../../api/data";
// import { getStaticInfo, editInfo, getDetails } from "../../api/data";
// import { getSchoolInfo } from "../../api/dictionaries";
export default {
  name: "historyDetails",
  props: {
    id: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      nameLength: "180px",
      textLength: "300px",
      //类型名称
      classType: "",
      //听课节数列表
      timeList: [1, 2, 3, 4, 5, 6, 7, 8],
      form: {
        id: "",
        tName: "",
        tNameInSchool: "",
        courseName: "",
        courseType: "",
        className: "",
        stuInSchool: "",
        allNum: "",
        factNum: "",
        attendance: "",
        evaluation: "",
        evaluationDetail: "",
        supervisor: this.$store.getters.name,
        listenDate: "",
        listenTimeArray: [],
        listenAdd: "",
        targets: [],
        status: 2,
      },
      activeNames: [],
      selectedOptions: ["优", "良", "中", "合格", "不合格"],
      groupActiveNames: [[1, 2, 3, 4, 5, 6, 7, 8, 9, 10], [1], [1], [1], [1]],
      staticInfo: {
        group1: [],
        group2: [],
        group3: [],
        group4: [],
        group5: [],
      },
      notions: "",
    };
  },
  mounted() {
    this.fetchDetails();
  },
  methods: {
    noUse() {},
    async fetchDetails() {
      const res = await getDetails(this.id);
      if (res.status === 200) {
        this.form = Object.assign({}, this.form, res.data.result);
        this.notions = res.data.result.notions;
        this.classType = res.data.result.type;
        this.form.listenDate = this.form.listenDay;
        this.form.listenTimeArray = this.form.listenTimeArray.map((value) => {
          return Number(value);
        });
        res.data.result.targets.forEach((value) => {
          // 增加一个属性
          value.selected = value.content;

          switch (value.groupSort) {
            case 1:
              this.staticInfo.group1.push(value);
              break;
            case 2:
              this.staticInfo.group2.push(value);
              break;
            case 3:
              this.staticInfo.group3.push(value);
              break;
            case 4:
              this.staticInfo.group4.push(value);
              break;
            case 5:
              this.staticInfo.group5.push(value);
              break;
            // no default
          }
        });
      }
    },
  },
};
</script>

<style scoped >
.box-card {
  margin-bottom: 1em;
}
.textArea {
  color: #000;
}

.centerOk {
  margin-top: 1em;
  margin-bottom: 1em;
  color: #67c23a;
  font-size: 0.7em;
}
</style>
